<template>
  <div>
    <!-- <el-row type="flex" align="middle" class="lineHeight80">

        <el-col :span="4" class="flexCenter">
          <el-button type="primary" @click="saveEdite">保存</el-button>
          <el-button type="primary" @click="temporarySave">存为草稿</el-button>
          <el-avatar
            :size="30"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
        </el-col>
      </el-row> -->
    <div
      :loading="quillUpdateImg"
      class="containerBox"
      element-loading-text="请稍等，图片上传中"
    >
      <mavon-editor
        @imgAdd="imgAdd"
        @imgDel="imgDel"
        fontSize="16px"
        @save="saveEdite"
        v-model="value"
        ref="md"
        previewBackground="rgb(67, 73, 76)"
        @change="changeData"
        :codeStyle="codeStyle"
        :toolbarsFlag="toolbarsFlag"
      >
        <template slot="right-toolbar-after">
          <MavonEditorTools
            @changeCodeStyle="changeCodeStyle"
            @changeThemeStyle="changeThemeStyle"
            @hidleShowTools="hidleShowTools"
          />
        </template>
      </mavon-editor>

      <div
        class="otherOperate"
        :style="{ top: toolbarsFlag ? '50px' : '10px' }"
      >
        <span
          @click="hidleShowTools"
          class="iconfont icon-xiangshangshouqi-yuankuang"
          v-if="toolbarsFlag"
          data-left="隐藏工具栏"
        ></span>
        <span
          @click="hidleShowTools"
          data-left="显示工具栏"
          class="iconfont icon-xiangxiazhankai-yuankuang"
          v-else
        ></span>
      </div>
    </div>
    <div class="codeStyle animated slideInRight" v-if="closeCodeStyleMpdel">
      <div class="codeStyleTitle">
        <h3>选择代码分格</h3>
        <i class="el-icon-close" @click="handleCloseStyle"></i>
      </div>
      <div class="codeStyleList">
        <ul @click.stop="handleClickLI($event)">
          <li v-for="(item, index) in codeStyleList" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <el-dialog title="发布文章" :visible.sync="dialogVisible" width="30%">
      <el-form
        label-position="center"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label-width="80px" label="文章标题" prop="type">
          <el-input
            v-model="ruleForm.inputValue"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="80px" label="展示封面" prop="type">
          <el-radio-group v-model="ruleForm.isCover">
            <el-radio label="0">无封面</el-radio>
            <el-radio label="1">单图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-upload
          :style="{ display: ruleForm.isCover === '1' ? 'block' : 'none' }"
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageCoverUrl" :src="imageCoverUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label-width="80px" label="文章类型" prop="type">
          <el-radio-group v-model="ruleForm.articleType">
            <el-radio label="0">原创</el-radio>
            <el-radio label="1">转载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="80px" label="发布形式" prop="type">
          <el-radio-group v-model="ruleForm.releaseForm">
            <el-radio label="0">公开</el-radio>
            <el-radio label="1">私密</el-radio>
            <el-radio label="2">粉丝可见</el-radio>
            <el-radio label="3">VIP可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="80px" label="文章分类" prop="type">
          <el-select v-model="ruleForm.articleTypeId" placeholder="选择分类">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script >
import MavonEditorTools from "@component/Article/ArticleEditorTools.vue"
import Qs from "qs"
import highjs from "../../common/lang.hljs.css"
export default {
  components: {
    MavonEditorTools,
  },
  props: {},
  data() {
    return {
      value: "", // 是上一次编辑的内容
      previewContent: "", // 预览内容
      dialogVisible: false,
      quillUpdateImg: false,
      imageCoverUrl: "",
      codeStyle: "agate",
      options: [
        {
          value: "1",
          label: "前端",
        },
        {
          value: "2",
          label: "后端",
        },
        {
          value: "3",
          label: "Python",
        },
        {
          value: "4",
          label: "框架",
        },
        {
          value: "5",
          label: "热门问题",
        },
      ],
      storageMysqlContent: "",
      closeCodeStyleMpdel: false,
      codeStyleList: [],
      toolbarsFlag: true,
      ruleForm: {
        resource: "0",
        isCover: "0",
        articleType: "0",
        releaseForm: "0",
        articleTypeId: "1",
        inputValue: "",
      },
      rules: {
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
    }
  },
  mounted() {
    this.codeStyleList = Object.keys(highjs)
  },
  created() {},
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    changeCodeStyle() {
      this.closeCodeStyleMpdel = !this.closeCodeStyleMpdel
    },
    changeThemeStyle() {
      console.log(`e`, 123)
    },
    hidleShowTools() {
      if (this.closeCodeStyleMpdel) this.closeCodeStyleMpdel = false
      this.toolbarsFlag = !this.toolbarsFlag
    },
    handleClickLI(e) {
      this.codeStyle = e.target.innerText
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    },
    handleCloseStyle() {
      this.closeCodeStyleMpdel = false
    },
    saveEdite() {
      this.dialogVisible = true
    },
    temporarySave() {
      console.log(this.content)
    },
    // 上传图片
    imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append("image", $file)
      this.$http
        .post("/article/articleImg", formdata)
        .then((res) => {
          this.$refs.md.$img2Url(
            pos,
            "http://localhost:10000/article/" + res.data.data
          )
        })
        .catch((err) => {})
    },
    // 删除图片
    imgDel() {
      console.log(`111`, 111)
    },
    changeData(markdown, html) {
      this.storageMysqlContent = html
    },
    async handleSubmitForm() {
      let userInfo = window.localStorage.getItem("userInfo")
      userInfo = JSON.parse(userInfo)
      console.log(`this.codeStyle`, this.codeStyle)
      let saveArticleContent = {
        content: this.storageMysqlContent,
        token: window.localStorage.getItem("token"),
        isOriginal: this.ruleForm.resource,
        coverImage: this.ruleForm.isCover,
        releaseType: this.ruleForm.articleType,
        articleTitle: this.ruleForm.inputValue,
        articleTypeId: this.ruleForm.articleTypeId,
        abstract: "我是摘要",
        nickname: userInfo.nickname,
        userId: userInfo.userId,
        codeStyle: this.codeStyle,
      }
      const { data: res } = await this.$http.post(
        "article/saveEditContent",
        Qs.stringify(saveArticleContent)
      )
      console.log(`res`, res)
      if (res.status === "SUCCESS") {
        this.$message.success("文章保存成功")
        this.dialogVisible = false
        this.$router.push("/")
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import "../../assets/css/index.less";
@import "../../assets/css/publicarticle.less";
::-webkit-scrollbar {
  width: 4px !important;
}
</style>
